<template>
  <div class="pageHeader">
    <Breadcrumb :items="breadCrumb" />
    <template v-if="title">
      <a-page-header
        :title="title"
        @back="back"
        :show-back="showBack"
        :subtitle="subtitle"
      >
        <template #extra>
          <a-space>
            <slot name="buts" />
          </a-space>
        </template>
      </a-page-header>
      <hr color="#f2f3f5" size="2px" />
    </template>
  </div>
  <div>
    <slot />
  </div>
  <div class="footer" v-if="!!slots.footer">
    <a-space> <slot name="footer" /></a-space>
  </div>
</template>

<script lang="ts" setup>
  import { PropType, useSlots } from 'vue';
  import { useRouter } from 'vue-router';

  let slots = useSlots();

  withDefaults(
    // 参数说明
    defineProps<{
      title?: string; // title
      showBack?: boolean; // 是否显示Back按钮
      subtitle?: string; // title右侧提示
      breadCrumb: string[]; // 面包屑
    }>(),
    {
      showBack: true,
    }
  );

  const router = useRouter();

  // 返回箭头
  const back = () => {
    router.back();
  };
</script>

<style lang="less" scoped>
  .pageHeader {
    // background-image: radial-gradient(
    //   var(--color-fill-3) 1px,
    //   rgba(0, 0, 0, 0) 1px
    // );
    // background-size: 16px 16px;
    // padding: 10px;
  }

  :deep(.container-breadcrumb) {
    margin: 5px 0 !important;
  }

  .arco-page-header {
    padding: 10px 0 !important;
  }

  .footer {
    margin-top: 20px;
    border-top: 1px solid var(--color-neutral-3);
    padding: 10px;
    display: flex;
    padding-right: 20px;
    justify-content: center;
  }
</style>
